<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数据验证</title>
	<style type="text/css">
		span{color:green;font-weight:bold;font-size: 30px;}
	</style>
</head>
<body>
	<div id="app">
		<p>父组件：<span>{{count}}</span></p>
		<my-component v-on:recieve="recieve" :count="count"></my-component>
	</div>
</body>
</html>
<script src="../../2.1.8/vue.js"></script>
<script>
	/*
		props 数据验证
		props : 接收值不在是以数据形式，而是对象形式
			如 ：count 为父组件传来的数据，条件不满足，vue 抛出警告 
			props : {
				count : { 
					type : Number
				}
			} 
			1. type : 正定数据类型，多类型可以是数组，type : [ Number, String ]
			2. default : 父组件默认传给子组件的值，可以是函数
				default : function(){ return 'hello world!'}
			3. require : true，参数必传，false，参数非必须
			4. validator : 自定义验证函数
	*/
	// 全局组件
	Vue.component('my-component',{
		props : {
			count : {
				// type : [Number, String],
				// type : Number,
				// default : 10,
				default : function(){
					return 101;
				},
				// require : true,
				require : false,
				validator : function( value ){
					console.log(value);
					var reg = /^\d+$/;
					return reg.test( value );
				}
			}
		},
		data(){
			return {
				increaseCount : this.count 
			}
		},
		template : 
			`<div>
				<h2>子组件：<span> {{increaseCount}}</span></h2>
				<button v-on:click="changeCout">button</button>
			</div>`,
		methods : {
			changeCout(){
				this.$emit( 'recieve', ++this.increaseCount );
			}

		}
	});
	var vm = new Vue({
			el : '#app',
			data : {
				count : 'c'
			},
			methods : {
				recieve : function(count){
					this.count = count ;
				}
			}
		});
</script>